<script setup lang="ts">
import { onMounted, reactive, watch, toRefs } from 'vue';
import { addZero } from "@/utils/fun";
const props = defineProps({
  list: {
    type: Array,
    default: () => [1, 2, 3, 4, 5, 6, 7, 8, 9]
  },
  current: {
    type: Number,
    default: 0
  },
})
const { current } = toRefs(props)
const state = reactive({
  list: [
    { title: '重点项目' },
    { title: '国际事务合作' },
    { title: '品牌设计' },
    { title: '影视合作' },
    { title: '会务会展' },
  ],
  current: 0
})
const emit = defineEmits(['change'])

const handleClick = (index: number) => {
  state.current = index
  emit("change", index);
}
onMounted(() => {
  state.current = current.value
})
watch(current, (val) => {
  state.current = val
})
</script>

<template>
  <div class="nav-list">
    <div class="num">{{ addZero(state.current + 1) }}</div>
    <div class="item" :class="[state.current === index && 'active']" v-for="(item, index) in state.list" :key="index"
      @click="handleClick(index)">
      <div class="text">{{ item.title }}</div>
      <div class="dot"></div>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.nav-list {
  position: fixed;
  z-index: 100;
  top: 50%;
  right: 30px;
  width: 1px;
  transform: translateY(-50%);
  visibility: visible;
  transition: 0.36s ease;
  opacity: 1;

  .num {
    position: absolute;
    top: -34px;
    left: 50%;
    font-size: 12px;
    color: #a2a2a2;
    transform: translateX(-50%);
  }

  .item {
    position: relative;
    width: 0;
    height: 1px;
    margin-bottom: 36px;

    &:not(:last-child):after {
      position: absolute;
      top: 10px;
      width: 1px;
      height: 22px;
      content: "";
      background: rgba(156, 156, 156, 0.21);
    }

    .text {
      position: absolute;
      right: 28px;
      transition: 0.36s ease;
      transform: translateY(10px);
      white-space: nowrap;
      opacity: 0;
    }

    .dot {
      position: absolute;
      z-index: 10;
      top: 50%;
      left: 50%;
      width: 13px;
      height: 13px;
      cursor: pointer;
      transform: translate(-50%, -50%);
      transition: 0.36s ease;
      border: 4px solid transparent;
      border-radius: 50%;
      background: #dcdcdc;
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;

      &::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 27px;
        height: 27px;
        content: "";
        transform: translate(-50%, -50%);
        transition: 0.36s ease;
        opacity: 0;
        border: 1px solid rgba(162, 162, 162, 0.2);
        border-radius: 50%;
      }
    }

    &:hover,
    &.active {
      .text {
        transform: translateY(-10px);
        opacity: 1;
      }

      .dot {
        background-color: #fff;
        background-image: linear-gradient(to right, #fff, #fff), linear-gradient(90deg, #3888FF, #6C71FF, #AA58FA, #FB6D86);

        &::after {
          opacity: 1;
        }
      }
    }
  }
}
</style>